<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputScript library="js" name="TraducaoCalendario.js"/>

        <title>
            <ui:insert name ="title">Template Home</ui:insert>
        </title>

        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if (args.loggedOut) {
                    location.href = args.raiz;
                }
            }
            function handleDrop(event, ui)
            {
                var droppedRecurso = ui.draggable;
                droppedRecurso.fadeOut('fast');
            }
        </script>

    </h:head>

    <h:body>

        <div id="conteiner">

            <div id="top" class="ui-widget-header ui-corner-all">

                <ui:insert name="top">
                    <center>
                        <p:clock pattern="EEE, d MMM yyyy HH:mm:ss"/>
                    </center>
                </ui:insert>

            </div>

            <div id ="menu">

                <p:panel header="Sistema Web de agendamento de atendimento" toggleable="true" toggleOrientation="horizontal">

                    <h:outputText value="Aplicação Web com JSF 2.2, Glassfish 4.0, Primefaces 4.0 e Hibernate 4.2.6"/>

                    <h:form>                        
                        <h:panelGrid columns="2">
                            <h:outputText value="Seletor de tema:"/>
                            <p:themeSwitcher id="seletorTemaHome" effect="fade" style="width:200px"
                                             value="#{temaBean.meuTema}">
                                <f:selectItem itemLabel="Escolha o tema:" itemValue=""/>
                                <f:selectItems value="#{temaBean.temas}"/>
                                <p:ajax listener="#{temaBean.salvarTema}"/>
                            </p:themeSwitcher>
                        </h:panelGrid>                        
                    </h:form>

                </p:panel>

                <h:form>                    
                    <p:menubar>
                        <p:menuitem value="Home" icon="ui-icon-home" url="#{appBean.caminhoBase}home.xhtml"/>
                        <p:submenu label="Cadastramento" icon="ui-icon-arrowthickstop-1-s"
                                   rendered="#{(loginBean.exibeFuncaoAdm) or (loginBean.exibeFuncaoReserva)}">
                            <p:menuitem value="Função" icon="ui-icon-gear" url="#{appBean.caminhoBase}funcao.xhtml"
                                        rendered="#{loginBean.exibeFuncaoAdm}"/>
                            <p:menuitem value="Usuário" icon="ui-icon-pencil" url="#{appBean.caminhoBase}usuario.xhtml"
                                        rendered="#{loginBean.exibeFuncaoAdm}"/>
                            <p:menuitem value="Recurso" icon="ui-icon-lightbulb" url="#{appBean.caminhoBase}recurso.xhtml"
                                        rendered="#{loginBean.exibeFuncaoAdm}"/>
                            <p:menuitem value="Reserva" icon="ui-icon-calendar" url="#{appBean.caminhoBase}reserva.xhtml"
                                        rendered="#{(loginBean.exibeFuncaoAdm) or (loginBean.exibeFuncaoReserva)}"/>
                        </p:submenu>
                        <p:submenu label="Pesquisar" icon="ui-icon-search">  
                            <p:menuitem value="Recursos" icon="ui-icon-lightbulb" url="#{appBean.caminhoBase}listarRecurso.xhtml"
                                        rendered="#{(loginBean.exibeFuncaoAdm) or (loginBean.exibeFuncaoReserva)}"/>
                            <p:menuitem value="Reservas" icon="ui-icon-calendar" url="#{appBean.caminhoBase}listarReserva.xhtml" />
                        </p:submenu>
                        <p:menuitem value="Sobre" icon="ui-icon-help" url="#{appBean.caminhoBase}sobre.xhtml"/>                        
                        <p:menuitem value="Sair" icon="ui-icon-close" oncomplete="handleLoginRequest(xhr, status, args)" 
                                    actionListener="#{loginBean.logout}"/>                        
                        <f:facet name="options">  
                            <p:outputLabel value="Olá, #{loginBean.usuario.nomeUsuario}" style="margin-right:10px"/>                            
                        </f:facet>
                    </p:menubar>                    
                </h:form>

            </div>

            <div id="content" class="center_content ui-widget-content ui-corner-all">
                <ui:insert name="content">Conteúdo</ui:insert>
            </div>

            <div id="bottom" class="ui-widget-header ui-corner-all">
                <ui:insert name="bottom">Sistema JSF Versão Alpha &copy; 2014</ui:insert>
            </div>

        </div>

    </h:body>

</html>